<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <title>商城</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>
<body>
    <div th:insert="~{public/publicTop::top}"></div>
    <div class="layui-carousel" id="test10">
        <div carousel-item="">
            <div th:each="ad:${ads}" ><a th:href="@{${ad.getUrl()}}"><img  style="width: 100%" th:src="@{'/img/'+${ad.getImg()}}"></a></div>
        </div>
    </div>
    <div class="layui-bg-gray" style="padding: 30px;" >
        <div class="layui-row layui-col-space15 " style=" width: 70%; margin: auto">
            <a th:each="good:${goods}" th:if="${good.getGstate() == '1'}" th:href="@{'/xiangqing/'+${good.getId()}}" class="layui-col-md3" style="height: 100%">
                <div >
                    <div class="layui-panel" style="margin: auto; text-align: center">
                        <div style="padding: 50px 30px;">
                            <img th:src="@{'/img/'+${good.getMainimg()}}" style="width: 100%;">
                            <h3 style="height: 21px;" class="title" th:text="${good.getName()}">  </h3>
                            <p class="price"><span class="num" th:text="${good.getPrice()}"></span>元<span>起</span><!----></p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '100%'
            ,height: '440px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

</html>